<template>
	<view>
		<page-head :title="'报名'" :headtype="2"></page-head>
		<view class="signname marginAuto">
			<view class="signtitle">{{ datas.school_name }}</view>
			<view class="signbc">{{ datas.name }}</view>
		</view>
		<view class="carmsg marginAuto">
			<view class="careach flex">
				<view class="careach-title">姓名</view>
				<view class="careach-r flex" style="justify-content: end;">
					<input class="rinput" type="text" v-model="name" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="careach flex">
				<view class="careach-title">联系电话</view>
				<view class="careach-r flex" style="justify-content: end;">
					<input class="rinput" type="text" v-model="mobile" maxlength="11" placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="careach flex" >
				<view class="careach-title">要求</view>
			</view>
			<view class="careach flex">
				<view class="raddress">
					<textarea class="raddresstext" placeholder="请输入您的要求~" v-model="remark"></textarea>
				</view>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:60rpx;">
			<uv-button text="提交支付" @click="enter()" :customStyle="{
				'background':'#1686F8',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
		<!-- 购买 -->
		<view class="bottompopup">
			<view class="zg" v-if="iscarpay" @click="iscarpay = false"></view>
			<view class="pup" :class="iscarpay ? 'showtop':''" style="width:100%;">
				<view class="pupclose" @click="iscarpay = false">
					<uv-icon name="close" size="22" color="#222222"></uv-icon>
				</view>
				<view class="paypup">
					<view class="money"><text style="font-size: 20rpx;">￥</text>{{ money }}</view>
					<view class="paytype">
						<view class="paytypetitle marginAuto">支付方式</view>
						<view class="paytypemain marginAuto">
							<view class="paytypeeach marginAuto flex" @click="paytype = 1">
								<view class="paytypeetitle">微信支付</view>
								<view class="paytypeer">
									<uv-icon name="checkmark-circle-fill" size="22" :color="paytype == 1 ? '#1686F8':'#E5E5E5'"></uv-icon>
								</view>
							</view>
							<!-- <view class="paytypeeach marginAuto flex" @click="paytype = 2">
								<view class="paytypeetitle">先验后付<text style="color: #9E9E9E;margin-left:16rpx;">0元下单，先用后付</text></view>
								<view class="paytypeer">
									<uv-icon name="checkmark-circle-fill" size="22" :color="paytype == 2 ? '#1686F8':'#E5E5E5'"></uv-icon>
								</view>
							</view> -->
							<view class="paytypeeach marginAuto flex" @click="apifun.navigate('/pages/home/discount','ordersn='+order_sn+'&apisite=/api/study/getPartnerDriveOrderCouponList')">
								<view class="paytypeetitle">优惠券</view>
								<view class="paytypeer flex">
									<view class="rtxt" style="color:#999999;" v-if="!disitem.id">请选择</view>
									<view class="rtxt" style="color:#333;" v-if="disitem.id">￥{{ disitem.amount }}</view>
									<uv-icon name="arrow-right" size="16" color="#999999"></uv-icon>
								</view> 
							</view>
						</view>
					</view> 
				</view>
				<view class="marginAuto" style="width:600rpx;margin:60rpx auto;">
					<uv-button text="立即支付" @click="enterpay()" :customStyle="{
						'background':'#1686F8',
						'color':'#ffffff',
						'font-size':'30rpx',
						'width':'600rpx',
						'height':'100rpx',
						'border-radius':'100rpx'
					}"></uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				datas:{},
				kcid:'',
				name:'',
				mobile:'',
				remark:'',
				order_sn:'',
				money:'',
				iscarpay:false,
				paytype:1,
				disitem:{}
			};
		},
		onLoad(option) {
			this.mobile = uni.getStorageSync('usermsg').mobile;
			this.lng = uni.getStorageSync('lng');
			this.lat = uni.getStorageSync('lat');
			this.kcid = option.kcid;
			uni.$on('emitdiscount',(data)=>{  // 优惠券
				this.disitem = data.disitem;
			});
			this.getkcfun()
		},
		methods: {
			enter(){
				let sendData = {
					course_id:this.kcid,
					name:this.name,
					mobile:this.mobile,
					remark:this.remark
				};
				if(this.name == '' || this.mobile == ''){
					this.apifun.toast("请输入您的报名信息");
					return false
				};
				if (this.apifun.testphone.test(this.mobile) == false || this.mobile == '') {
					this.apifun.toast("手机格式有误");
					return false
				};
				this.apifun.unirequest('/api/study/createStudyOrder','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.order_sn = datas.order_sn;
						this.money = datas.amount;
						this.iscarpay = true;
					}else{
						this.apifun.toast(res.msg)
					}
				});
			},
			enterpay(){  // 支付
				let sendData = {
					pay_type:this.paytype,  // pay_type :1微信  2后付
					order_sn:this.order_sn,
					user_coupon_id:this.disitem.id || ''
				};
				this.apifun.unirequest('/api/study/payPartnerDriveOrder','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.wxpaymini(datas,()=>{
							uni.switchTab({
								url: '/pages/tabbar/home'
							})
						});  // 支付
					}else{
						this.apifun.toast(res.msg)
					}
				});
			},
			getkcfun(){
				let sendData = {
					course_id:this.kcid,
					lng:this.lng,
					lat:this.lat
				};
				this.apifun.unirequest('/api/study/getCourseDetail','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	@import '../../public/popupb.scss';
	.signname{
		width: 690rpx;
		padding: 30rpx 0 20rpx;
		.signtitle{
			color: #222222;
			font-size: 34rpx;
			line-height: 60rpx;
			font-weight: 600;
		}
		.signbc{
			color: #666666;
			font-size: 30rpx;
		}
	}
	.carmsg{
		width: 650rpx;
		padding:0 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		.careach{
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1px solid #F9F9F9;
			.careach-title{
				font-size: 30rpx;
				color: #222222;
				line-height: 60rpx;
			} 
			.careach-r{
				width: 50%;
				line-height: 60rpx;
				.rinput{
					width:100%;
					text-align: right;
					font-size:30rpx;
					color:#333;
					line-height: 60rpx;
				}
				.carstatus{
					color: #333333;
					font-size: 30rpx;
					.carstatustxt{
						margin-left: 20rpx;
					}
				}
				.dureach{
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					background:#DFF1FF;
					border-radius:18rpx;
					text-align: center;
					color:#0089FB;
					font-size:40rpx;
				}
				.durnum{
					width:100rpx;
					text-align: center;
					line-height: 60rpx;
					color:#222222;
					font-size: 30rpx;
				}
			}
			.raddress{
				width:92%;
				padding: 20rpx 4%;
				height: 100rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				.raddresstext{ 
					width: 100%;
					height: 100rpx;
					line-height:40rpx;
					color: #333;
					font-size: 24rpx;
				}
			}
		}
	}
	// --支付方式popup
	.paypup{
		.money{
			padding: 80rpx 0 40rpx;
			color: #222222;
			font-size: 60rpx;
			text-align: center;
		}
		.paytype{
			.paytypetitle{
				width: 690rpx;
				font-size: 28rpx;
				color: #222222;
			}
			.paytypemain{
				.paytypeeach{
					width: 630rpx;
					margin-top: 20rpx;
					padding: 20rpx 30rpx;
					background:#F6F6F6;
					border-radius: 20rpx;
					justify-content: space-between;
					.paytypeetitle{
						color: #222222;
						font-size: 30rpx;
						line-height: 50rpx;
					}
					.paytypeer{
						.rtxt{
							font-size:30rpx;
						}
					}
				}
			}
		}
	}
</style>